<template>
  <view class="record-item">
    <view
      class="order-header"
      :class="{
        wait: [0, 10, 100].includes(record.orderStatus),
        runing: [200, 300, 400].includes(record.orderStatus),
        done: [1000, -100].includes(record.orderStatus),
      }"
    >
      <view class="radio">
        <ve-icon v-if="value" name="icon-map-check-selected" width="36" height="36" />
        <ve-icon v-else name="icon-map-check" width="36" height="36" />
      </view>
      <view class="order-channel-name"> {{ record.orderSource == 1 ? '线下' : record.channelTypeName }} </view>
      <view class="order-code">
        <view class="order-code-item" v-if="record.channelOrderCode">
          渠道订单号<text class="order-code-text">{{ record.channelOrderCode }}</text>
        </view>
        <view class="order-code-item" v-if="record.orderCode">
          平台订单号<text class="order-code-text">{{ record.orderCode }}</text>
        </view>
      </view>
      <view class="order-status">{{ record.orderStatusName }}</view>
    </view>
    <view class="order-main">
      <!-- 车辆信息 -->
      <view class="order-license">
        <view class="license-number" v-if="record.carLicenseNo" @longpress="copyText(record.carLicenseNo)">{{ record.carLicenseNo }}</view>
        <view class="car-model overflow-ellipsis">{{ record.carModelName || '-' }}</view>
      </view>
      <view class="divider"></view>
      <view class="member-info">
        <view class="label">承租人</view>
        <view class="member-name">{{ record.memberName }}</view>
        <view class="member-phone" @click="toCall">
          <text class="member-phone_text">{{ record.memberPhone }}</text>
          <ve-icon name="tel_1" color="#3072f6" size="27" />
        </view>
      </view>
      <view class="divider"></view>
      <!-- 订单标签 -->
      <view class="order-tag-list">
        <view class="order-tag-item" v-for="(item, index) in record.orderLabelList" :key="index">
          {{ item }}
        </view>
      </view>
      <!-- 取还车信息 -->
      <view class="order-car-info-block">
        <order-item-site :record="record" type="site" />
        <order-item-site style="margin-top: 24rpx" :record="record" type="returnSite" />
      </view>
      <!-- 租赁周期 -->
      <view class="order-lease">
        <view class="order-lease-item">
          <view class="order-lease-item-tag">预取</view>
          <view class="order-lease-item-time">{{ record.startTime }}</view>
        </view>
        <view class="order-lease-item">
          <view class="order-lease-item-tag">预还</view>
          <view class="order-lease-item-time">{{ record.endTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { dialPhone, copyText } from '@/utils'
  import OrderItemSite from './orderItemSite.vue'

  const props = defineProps({
    value: Boolean,
    record: {
      type: Object,
      default: () => {},
    },
  })
  const toCall = () => {
    const phoneNumber = props.record.memberPhone
    // 拨打电话
    dialPhone(phoneNumber)
  }
</script>

<style lang="less" scoped>
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .record-item {
    border-radius: 8rpx;
    margin: 24rpx;
    background: #fff;
    .order-header {
      padding: 24rpx;
      display: flex;
      align-items: center;
      padding-bottom: 24rpx;
      .radio {
        margin-right: 16rpx;
      }
      .order-channel-name {
        width: 64rpx;
        height: 64rpx;
        text-align: center;
        line-height: 64rpx;
        background-color: #3072f6;
        font-size: 24rpx;
        margin-right: 20rpx;
        border-radius: 4rpx;
        color: #ffffff;
      }
      .order-code {
        flex: 1;
        .order-code-item {
          font-size: 24rpx;
          color: #8491a8;
          line-height: 1;
          .order-code-text {
            margin-left: 8rpx;
            color: #191c27;
          }
        }
      }
      .order-code-item + .order-code-item {
        margin-top: 16rpx;
      }
      .order-status {
        width: 84rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #e59b1c;
      }

      &.wait {
        background: linear-gradient(90deg, #fff3d5 0%, #ffffff 100%);
        color: #e59b1c;
      }

      &.runing {
        background: linear-gradient(90deg, #d5e5ff 0%, #ffffff 100%);
        color: #3072f6;
      }

      &.done {
        background: linear-gradient(90deg, #eaecef 0%, #ffffff 100%);
        color: #8491a8;
      }
    }
    .order-main {
      padding: 24rpx;
      background: #ffffff;
      .order-license {
        display: flex;
        align-items: center;
        padding-bottom: 20rpx;
        line-height: 28rpx;
        .license-number {
          height: 44rpx;
          line-height: 44rpx;
          padding: 0 8rpx;
          background: #3072f6;
          border-radius: 4rpx;
          margin-right: 16rpx;
          color: #ffffff;
          font-size: 22rpx;
          font-weight: 600;
        }
        .car-model {
          flex: 1;
          font-size: 24rpx;
          font-weight: 600;
          color: #191c27;
        }
      }
      .divider {
        width: 100%;
        height: 2rpx;
        background: #f4f4f4;
      }
      .order-tag-list {
        padding: 20rpx 0;
        .order-tag-item {
          height: 36rpx;
          line-height: 36rpx;
          display: inline-block;
          font-size: 24rpx;
          padding: 0rpx 12rpx;
          border-radius: 18rpx;
          border: 2rpx solid #f5d6a2;
          color: #e59b1c;
          margin-right: 20rpx;
        }
      }
      .order-car-info-block {
        width: 100%;
        background: #f6f7fb;
        border-radius: 4rpx;
        padding: 24rpx;
      }
      .order-lease {
        display: flex;
        padding-top: 20rpx;
        .order-lease-item {
          width: 50%;
          display: flex;
          align-items: center;
          .order-lease-item-tag {
            width: 68rpx;
            height: 40rpx;
            line-height: 38rpx;
            text-align: center;
            border-radius: 20rpx;
            border: 1rpx solid #ff7d00;
            font-size: 22rpx;
            color: #ff7d00;
          }
          .order-lease-item-time {
            font-size: 24rpx;
            color: #191c27;
            margin-left: 8rpx;
          }
        }
      }

      .member-info {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        // 字
        font-size: 24rpx;
        color: #191c27;
        line-height: 24rpx;
        .label {
          margin-right: 80rpx;
          color: #8491a8;
        }
        .member-name {
          margin-right: 24rpx;
        }
        .member-phone {
          display: flex;
          align-items: center;
          &_text {
            margin-right: 16rpx;
          }
        }
      }
    }
  }
</style>
